<template>
  <!-- ref 也可以在标签上使用 -->
  <div class="chart-box" ref="chart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      chart: null,
    };
  },
  beforeDestroy() {
    this.chart && this.chart.dispose();
  },
  methods: {
    init() {
      // this.refs.chart === document.querySelector('.chart-box')
      this.chart = echarts.init(this.$refs.chart);
    },
    draw(config) {
      if (!this.chart) this.init();
      this.chart.setOption(config);
    },
    resize() {
      if (!this.chart) this.init();
      this.chart.resize();
    }
  },
  mounted() {
    // const chart = echarts.init(this.$refs.chart);
    // chart.setOption({
    //   title: {
    //     text: "ECharts 入门示例",
    //   },
    // });

    // this.init();
  },
};
</script>

<style lang="sass">
.chart-box
  background: #f3f3f3
  border-radius: 8px
</style>
